<template>
  <div class="main-container">
    <div class="container">
      <div class="left">
        <img :src="publisher.userPic" :alt="publisher.name + ' logo'">
        <div class="info">
          <div class="title">{{ publisher.userName }}</div>
          <div class="stats">
            <span><i class="el-icon-document"></i>{{ publisher.userArticles }} 文章</span>
            <span class="divider">|</span>
            <span><i class="el-icon-user"></i>{{ publisher.userFans }} 粉丝</span>
            <span class="divider">|</span>
            <span><i class="el-icon-check"></i>{{ publisher.userLike }} 关注</span>
          </div>
          <div class="details">
            简介：{{ publisher.userProfile }}<br>
            <div class="address">地址：{{ publisher.userLocation }}</div>
          </div>
        </div>
      </div>
      <button 
        class="right"
        :class="{ 'followed': isFollowed }"
        @click="toggleFollow"
      >
        {{ isFollowed ? '已关注' : '+关注' }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PublisherInfo',
  props: {
    publisherName: {
      type: String
    }
  },
  data() {
    return {
      isFollowed: true,
      publisher: {
        userName: '新华社',
        userPic: 'https://picsum.photos/360/200?random=3',
        userArticles: '1.2万',
        userFans: '2761.6万',
        userLike: '82',
        userProfile: '简介：新华通讯社，是中国的国家通讯社同时也世界性现代通讯社。',
        userLocation: '地址：北京市西城区宣武门西大街57号'
      }
    }
  },
  methods: {
    toggleFollow() {
      this.isFollowed = !this.isFollowed
      console.log(this.isFollowed);
      // true 关注，false 不关注
      if (this.isFollowed) {
        this.$api.serviceNews.post('api/news/follow', 
      {"userName": this.publisherName, "userAccount": this.$store.state.user.userAccount}, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(response => {
        if (response.data.code == 200){
        }
      })
      .catch(error => {
        console.error('失败', error);
      });
      } else {
        this.$api.serviceNews.post('api/news/cancelFollow', 
      {"userName": this.publisherName, "userAccount": this.$store.state.user.userAccount}, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(response => {
        if (response.data.code == 200){
        }
      })
      .catch(error => {
        console.error('失败', error);
      });
      }
    },
    getPublisherInfo() {
      this.$api.serviceNews.post('api/news/publisherInfo', 
      {"userName": this.publisherName, "userAccount": this.$store.state.user.userAccount}, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(response => {
        if (response.data.code == 200){
          this.publisher = response.data.data
          this.isFollowed = response.data.data.isFollowed
        }
      })
      .catch(error => {
        console.error('失败', error);
      });
    }
  },
  mounted() {
    this.getPublisherInfo()
  }
}
</script>

<style scoped>
.main-container {
  width: 1150px;
  margin: 20px auto;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
  overflow: hidden;
  background-color: white;
}
.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 40px;
}
.left {
  display: flex;
  align-items: flex-start;
}
.left img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin-right: 24px;
  object-fit: cover;
  border: 2px solid #ff4d4f;
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.15);
}
.left .info {
  display: flex;
  flex-direction: column;
}
.left .info .title {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #222;
  letter-spacing: 0.5px;
}
.left .info .stats {
  display: flex;
  font-size: 15px;
  color: #666;
  margin-bottom: 16px;
}
.stats span {
  margin-right: 24px;
  display: flex;
  align-items: center;
}
.stats span i {
  color: #ff4d4f;
  margin-right: 6px;
  font-size: 16px;
}
.left .info .details {
  font-size: 15px;
  color: #666;
  line-height: 1.8;
}
.left .info .details .address {
  color: #666;
  margin-top: 10px;
}
.right {
  background-color: #ff4d4f;
  color: white;
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.25);
  letter-spacing: 0.5px;
}
.right:hover {
  background-color: #ff2d2f;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 77, 79, 0.35);
}
.right.followed {
  background-color: #f0f0f0;
  color: #666;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.right.followed:hover {
  background-color: #e0e0e0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.divider {
  color: #eee;
  margin: 0 8px;
}
</style>